import React, { Component } from 'react';
import { observable, useStrict, action } from 'mobx';
import { observer , inject} from 'mobx-react';
import Util from "../lib/commonJs";
import $ from "jquery";
import Pop from "./Pop";
import Cookie from 'js-cookie';
import { message , Badge , Icon, Popover } from 'antd';
import zhCN from 'antd/lib/locale-provider/zh_CN';


class BaseApp extends Component {

    constructor(props) {
	super(props);
	let _this = this;

	this.enPage = (pageAct,pageSize)=>{
	    return {
		start:pageSize * (pageAct - 1),
		hit:pageSize
	    }
	};
	this.dePage = (start,hit)=>{
	    return {
		pageAct:(start + hit) / start,
		pageSize:hit
	    }
	};
	this.StaticDom = {
	    emptyTr:(colSpan,msg)=>{
		return (<tr className="empty-row"><td colSpan={colSpan}>{Util.isEmpty(msg)?'暂无数据':msg}</td></tr>)
	    }
	};

    }
    @action AJAX = (para)=>{
	Object.assign({
	    autoError:true,
	    contentType:"application/json"
	},para);
	return new Promise((resolve, reject)=>{
	    $.ajax(para).then((data)=>{
		if(typeof data.state !== "undefined" && data.state !== 200 && para.autoError){
		    if(!Util.isEmpty(data)){
			if(Util.isEmpty(data.message)){
			    Pop.alert("未知错误");
			}else{
			    Pop.alert(data.message);
			}
		    }
		    reject(data.message)
		}else{
		    resolve(data);
		}
	    },(err)=>{
		if(err.status !== 200 && para.autoError){
		    Pop.alert(`${err.status} : ${err.statusText}`);
		}
		resolve(err);
	    })
	})
    };
    getUrlPath = ()=>{
	if(typeof window !== "undefined"){
	    let href = window.location.href.split("?")[0];
	    let hrefArr = href.split("/");
	    return `${hrefArr[hrefArr.length-1]}`;
	}else{
	    return ``;
	}
    };
    parseUrl = (url)=>{
	return url
	.substring(url.indexOf('?') + 1)
	.split('&')
	.map((query) => query.split('='))
	.reduce((params, pairs) => (params[pairs[0]] = pairs[1] || '', params), {});
    };
    // 组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state
    //componentWillMount(){}

    // 组件渲染之后调用，可以通过this.getDOMNode()获取和操作dom节点，只调用一次
    //componentDidMount(){}

    // 组件接受新的state或者props时调用，调用this.forceUpdate会跳过此步骤
    //shouldComponentUpdate(nextProps, nextState){}

    // 组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state
    //componentWillUpdate(nextProps, nextState){}

    //组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。
    //componentDidUpdate(){}

    //组件将要接收新的props执行
    //componentWillRecevieProps(){}

    //组件将要卸载时调用
    //componentWillUnmount(){}

    render() {}
}

/***
 * 管理系统主结构
 */
class MainBody extends BaseApp {
    constructor(props) {
	super(props);
    }
    render() {
        return(
            <div id="app" style={{height:"100%",width:"100%",overflow:"auto",minWidth:"1300px",minHeight:"600px"}}>
		<Header />
		<div className="app-body">
		    {
		        this.props.children
		    }
		</div>
		<Footer/>
		<div className="loading-mask">
		    <div className="loading-pic"/>
		</div>
	    </div>
	)
    }
}
/***
 * 管理系统头部容器
 */
class Header extends BaseApp {
    constructor(props){
	super(props);
    }
    render() {
	return (
	    <div className={"app-head"}>
		<div className={"head-msg"}>
		    <div className={"head-icon"}/>
		    <div className={"head-text"}>梧桐链区块浏览器</div>
		</div>
		{this.props.children}
	    </div>
	);
    }
}
class Footer extends BaseApp {
    constructor(props){
	super(props);
    }
    render() {
	return (
	    <div className="app-foot">Copyright © 2017 苏州同济金融科技研究院</div>
	);
    }
}


/***
 * 表单模板的预设结构
 */
class FromGroup extends BaseApp {
    constructor(props) {
	super(props);
    }

    _onRemark = (remark)=>{

    };

    render() {
	return (
	    <div className="cake-from-group" style={this.props.style}>
		<div className="cake-from-content">
		    <div className="cake-from-label" style={this.props.labelStyle}>
			{this.props.label}
			{this.props.must?<span style={{color:"red"}}>*</span>:''}
			{this.props.remark?<i onClick={this._onRemark.bind(this,this.props.remark)} className="fa fa-question-circle-o"/>:''}
		    </div>
		    <div className="cake-from-content" style={this.props.contentStyle}>
			{this.props.children}
		    </div>
		</div>
	    </div>
	)
    }
}
export { BaseApp , MainBody , Header , Footer }
export default BaseApp;
